<template>
  <div class="container">
    <h4>原子剪贴板</h4>
    <el-row>
      <el-col v-for="item in 10" :key="item" :span="24">
        <el-card
          style="
            width: 250px;
            margin-top: 0.5rem;
            background-color: #495057;
            color: #fff;
          "
        >
          <template #header>
            <el-space style="float: right"
              ><span>{{ item }}</span>
              <el-dropdown>
                <el-icon color="red"><More /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                  </el-dropdown-menu></template
                >
              </el-dropdown>
            </el-space></template
          >
          <p>示例文本{{ item }}</p></el-card
        >
      </el-col>
    </el-row>
    <el-button @click="jump()">回到首页</el-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import {
  appWindow,
  LogicalPosition,
  LogicalSize,
} from "@tauri-apps/api/window";
// 调整window大小
const size = new LogicalSize(300, 400);
appWindow.setSize(size);
appWindow.setPosition(new LogicalPosition(1225, 400));
const router = useRouter();
const jump = () => {
  router.push("/");
};
</script>

<style scoped>
.container {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  color-scheme: only dark !important;
}
:deep(.el-card__header) {
  padding: 0;
}
</style>
